<template>
	<view class="table">
		<scroll-view scroll-x scroll-y enable-flex style="width: 100%;height: 100%;">
			<view class="head" ref="tableHeadRef" bindscroll="headScroll">
				<view class="head-col" :style="headStyle(item)" v-for="(item,index) in headColumns" :key="index">
					<text class="">
						{{item.name}}
					</text>
				</view>
			</view>
			<view class="main">
				<view class="main-row" v-for="(j,jIndex) in list" :key="jIndex">
					<view class="main-row-col" :style="headStyle(item)" v-for="(item,index) in headColumns"
						:key="index">
						<text class="">
							{{j[item.props]}}
						</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'selTable',
		props: {
			headColumns: {
				type: Array,
				require: true,
				default: []
			},
			list: {
				type: Array,
				require: true,
				default: []
			},
		},
		data() {
			return {}
		},
		computed: {
			colWidthTotal() {
				let arr = this.headColumns.map(i => +i.minWidth)
				let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0)
				return sum
			}
		},
		mounted() {},
		methods: {
			headStyle(val) {
				let obj = {
					'min-width': `${val.minWidth}px`,
					'width': `${(val.minWidth*100)/this.colWidthTotal}%`,
					'text-align': `${val.align?val.align:'left'}`,
					'color': `${val.color?val.color:'#000'}`,
				}
				return obj
			},
			headScroll(e) {
				console.log(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.table {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		font-size: 14px;
		position: relative;
		background-color: #fff;

		.head {
			display: flex;
			align-content: center;
			flex-wrap: nowrap;
			position: sticky;
			top: 0;

			&-col {
				height: 45px;
				line-height: 45px;
				background-color: #fff;
			}
		}

		.main {
			&-row {
				display: flex;
				align-content: center;
				flex-wrap: nowrap;

				&-col {
					height: 45px;
					line-height: 45px;
				}
			}
		}
	}

	::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
</style>